<template>
<el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
        <el-form-item prop="typeName" label="设施名称">
            <el-input v-model="dataForm.typeName" placeholder="设施名称"></el-input>
        </el-form-item>
        <el-form-item prop="typeCode" label="设施类型">
            <el-input v-model="dataForm.typeCode" placeholder="设施类型"></el-input>
        </el-form-item>
        <el-form-item prop="withIcon" label="对应图标">
            <el-select v-model="dataForm.withIcon" placeholder="对应图标" clearable style="width:80%">
                <el-option :value="item.image" v-for="item in iconList" :key="item.image" :label="item.image">
                </el-option>
            </el-select>
            <el-image :src="dataForm.withIcon" v-if="dataForm.withIcon" style="vertical-align: middle;margin:0px 0 0 10px"></el-image>
        </el-form-item>
    </el-form>
    <template slot="footer">
        <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
export default {
    data() {
        return {
            visible: false,
            dataForm: {
                id: '',
                typeName: '',
                typeCode: '',
                withIcon:''
            },
            iconList: [{
                    image: 'https://i.ringzle.com/file/20231122/e068d918dcd84d9781f8ab32b6245936.png'
                },
                {
                    image: 'https://i.ringzle.com/file/20231122/b8a0eaf7ab0648bf859195a423d49d77.png'
                },
                {
                    image: 'https://i.ringzle.com/file/20231122/7cdae58854cd470997eaf8f87f5788de.png'
                },
                {
                    image: 'https://i.ringzle.com/file/20231122/a332238b79704228a1ca9b7041136a01.png'
                },
                {
                    image: 'https://i.ringzle.com/file/20231122/ecc505b52c0b4974a75d4b33ab8a16f4.png'
                },
                {
                    image: 'https://i.ringzle.com/file/20231122/b444254c9d084f78be5debb2493e0562.png'
                },
                {
                    image: 'https://i.ringzle.com/file/20231122/f2c86b4b93c049f1aeb3dd5344917701.png'
                },
                {
                    image: 'https://i.ringzle.com/file/20231122/81f0ccabd25540329770bcd6bc61fc1d.png'
                },

                {
                    image: 'https://i.ringzle.com/file/20231122/75b0e5ed1972421895266f0e3e033b52.png'
                },
            ]
        }
    },
    computed: {
        dataRule() {
            return {
                typeName: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                typeCode: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }],
                withIcon: [{
                    required: true,
                    message: this.$t('validate.required'),
                    trigger: 'blur'
                }]
            }
        }
    },
    methods: {
        init() {
            this.visible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].resetFields()
                if (this.dataForm.id) {
                    this.getInfo()
                }
            })
        },
        // 获取信息
        getInfo() {
            this.$http.get(`/hotel/facility/type/${this.dataForm.id}`).then(({
                data: res
            }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.dataForm = {
                    ...this.dataForm,
                    ...res.data
                }
            }).catch(() => {})
        },
        // 表单提交
        dataFormSubmitHandle: debounce(function () {
            this.$refs['dataForm'].validate((valid) => {
                if (!valid) {
                    return false
                }
                this.$http[!this.dataForm.id ? 'post' : 'put']('/hotel/facility/type', this.dataForm).then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg)
                    }
                    this.$message({
                        message: this.$t('prompt.success'),
                        type: 'success',
                        duration: 500,
                        onClose: () => {
                            this.visible = false
                            this.$emit('refreshDataList')
                        }
                    })
                }).catch(() => {})
            })
        }, 1000, {
            'leading': true,
            'trailing': false
        })
    }
}
</script>
